<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f1">
                <feDropShadow dx="1" dy="1" stdDeviation="2"></feDropShadow>
            </filter>
        </defs>

        <rect x="20" y="20" width="50" height="40" fill="#f00" filter="url(#f1)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f2">
                <feDropShadow dx="2" dy="2" stdDeviation="1" flood-color="#f00" flood-opacity="0.8"></feDropShadow>
            </filter>
        </defs>

        <rect x="20" y="20" width="50" height="40" fill="#f00" filter="url(#f2)"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <filter id="f3">
                <feGaussianBlur  stdDeviation="2"  />
            </filter>
        </defs>
        <image href="../imgs/5.png" x="0" y="0" height="100" width="100" filter="url(#f3)"/>
    </svg>


    <script src="index.js"></script>
</body>
</html>